 import { useState, useEffect } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import axios from "axios";

import './index.less';
const Demo = ({refDemo}) => {
  const a = () => {
    const navs = document.querySelectorAll(".tab-navbar nav label");
    const tabs = document.querySelector(".tab-navbar main ul");

    navs.forEach((v, i) => v.addEventListener("click", e => {
      navs.forEach(v => v.classList[v === e.target ? "add" : "remove"]("active"));
      console.log(navs);
      
      tabs.style.setProperty("--tab-index", i);
    }));
  }
  useEffect(() => {
  console.log(refDemo,'refDemo');
  }, [refDemo.current])
  type A={
    a:{
      b:number,
      d:{
        e:Function
      }
    }
    ,c:[]
  }
  type C=keyof A;
  const c:C="a"
  type B= Record<"a",A>;
  return (
    <div>
      <div onClick={()=>{
        refDemo.current={
          ...refDemo.current,
          a:refDemo.current.a+1,
          b:222,d:111222
        }
        console.log(refDemo.current,'refDemo.current');
        
      }} className="cl">11111</div>
      <div className={"tab-navbar"}>
        <nav>
          <label className={"active"}>标题1</label>
          <label>标题2</label>
          <label>标题3</label>
          <label>标题4</label>
        </nav>
        <main>
          {/*
           <ul style={{`--tab-count:2`}}>
            <li style="--bg-color: #f66;">内容1</li>
            <li style="--bg-color: #66f;">内容2</li>
            <li style="--bg-color: #f90;">内容3</li>
            <li style="--bg-color: #09f;">内容4</li>
          </ul> 
          */}
        </main>
      </div></div>);
};

export default Demo;